<template>
  <div>
    <el-container>
      <el-header class="homeHeader">
        <div class="title">后台管理系统</div>
        <el-dropdown class="userInfo"
                     @command="commandHandler">
          <span class="el-dropdown-link">
            {{ user.adminUsername }}<i> <img :src="user.adminFace" />
            </i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
            <el-dropdown-item command="setting">管理员设置</el-dropdown-item>
            <el-dropdown-item command="logout">注销登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-container>
        <el-aside width="200px">
          <el-menu router
                   unique-opened>
            <el-submenu v-for="(item, index) in routes"
                        :key="index"
                        v-if="!item.hidden"
                        :index="index + ''">
              <template slot="title">
                <i :class="item.icon"
                   style="color: #7f81ff; margin-right: 5px"></i>
                <span>{{ item.name }}</span></template>
              <el-menu-item v-for="(children, indexj) in item.children"
                            :index="children.path"
                            :key="indexj">
                <i :class="children.icon"> </i>
                {{ children.name }}
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <!---面包屑导航-->
          <!--面包屑-->
          <el-breadcrumb separator-class="el-icon-arrow-right"
                         v-if="this.$router.currentRoute.path!='/home'">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
          </el-breadcrumb>

          <div class="homeWelcome"
               v-if="this.$router.currentRoute.path == '/home'">
            二手交易平台后台管理系统
            <!-- {{this.$router.currentRoute.name}} -->
          </div>
          <router-view class="homoeRouteView"> </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {
      // user: JSON.parse(window.sessionStorage.getItem('userInfo')),
      user:{}
    }
  },

  computed: {
    routes() {
      return this.$store.state.routes
    }
  },

  mounted() {
     this.getAdminInfo();
  },


  methods: {
    getAdminInfo(){
      var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));

        this.getRequest('/admin/api/getAminInfo/' + userInfo.id).then(res => {
        console.log(res)
        if (res.code == 200 && res.msg == "success") {
          this.user = res.data;
         } else {
          this.$message.error("获取用户信息失败");
        }
      })
    } , 



    commandHandler(command) {
      console.log(command)
      if (command == "logout") {
        this.$confirm("此操作将注销登录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "waring",
        }).then(() => {
         
          window.sessionStorage.clear();
          this.$store.commit("initRoutes", []);
          this.$router.push("/login");
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销"
          });

        })


      } else if (command == 'userInfo') {
        this.$router.push('/adminInfo');
      }else if(command == 'setting'){
        this.$router.push('/adminSetting');
      }

    },

  }

};
</script>

<style lang="css">
.homeHeader {
  background: #409eff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
}

.homeHeader .title {
  font-size: 30px;
  font-family: '华文行楷';
  color: white;
}
.homeHeader .userInfo {
  cursor: pointer;
}
.el-dropdown-link img {
  width: 48px;
  height: 48px;
  border-radius: 24px;
}
.homeWelcome {
  text-align: center;
  font-size: 30px;
  font-family: '楷体';
  color: #409eff;
  padding-top: 50px;
}
.homoeRouteView {
  margin-top: 10px;
}

.el-aside::-webkit-scrollbar {
  display: none;
}
</style>